<template>
	<view>
		<h-search class="h-search"></h-search>
		<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="250">
			<swiper-item v-for="item in gallery" :key="item.backgroundImage.url">
				<view class="swiper-ite">
					<image :src="item.backgroundImage.url"></image>
				</view>
			</swiper-item>
		</swiper>
		 
		<view class="scene">
			<view class="bigTitle">
				你想在哪里使用投影仪？
			</view>
			<scroll-view class="scroll-view_H" :scroll-x="true" >
				<view class="scroll-view-item_H" v-for="item in sence" :key="item.sceneId">
					<image :src="item.image.url"></image>
					<text>{{item.text}}</text>
				</view>				 
			</scroll-view>
		</view>
		<block v-for="(section,index) in cateList" :key="index">
			<h-product-bigcard v-if="section.style===1" :section="section"></h-product-bigcard>
			<h-product-list v-if="section.style===2" :section="section"></h-product-list>
			<h-product-img v-if="section.style===3" :section="section"></h-product-img>
		</block>

	</view>
</template>
<script setup>
	// 导入响应式方法
	import {
		ref
	} from 'vue'
	// 导入获取api：获取幻灯片，场景，产品列表
	import {
		getSwiper,
		getSence,
		getCateList
	} from '@/api/index.js'
	// 定义data
	const gallery = ref([]);
	const sence = ref([]);
	const cateList = ref([])
	// 获取幻灯片数据
	getSwiper()
		.then(res => {
			// console.log("swiper",res);
			gallery.value = res.data;
		})
	// 获取场景
	getSence()
		.then(res => {
			sence.value = res.data;
		})
	// 获取产品列表
	getCateList()
		.then(res => {
			cateList.value = res.data;
		})
</script>
<style lang="scss" scoped>
	
	.swiper{
		width: 100%;
		height: 900rpx;
		.swiper-ite{
			padding: 0  20rpx;
		}
		image{
			width:100%;
			height: 900rpx;
			border-radius: 12rpx;
		}
		
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;		
	}
	.scroll-view-item_H {
		display: inline-block;
		position: relative;
		width: 40%;
		height: 460rpx;
		// border:2px solid red;
		margin-left: 20rpx;
		image{
			width: 100%;
			height: 100%;
			
		}
		text{
			position: absolute;
			left:30rpx;
			bottom:30rpx;
			color:#fff;
			font-size: 30rpx;
			font-weight: 600;
		}
			
	}
	
</style>
